<template>
    <div class="view">
        <div class="height">
            <div class="title">{{ data.title }}</div>
            <div class="func">
                <el-button v-if="data.type === 1" type="primary" @click="goToEdit">编辑</el-button>
            </div>
        </div>
        <div class="content" v-if="data.type === 1">
            <div class="title">{{ data.title }}</div>
            <div class="editor-content-view" v-html="data.content"></div>
        </div>
        <div class="footer" v-if="data.type === 1">
            <div class="author"><el-icon>
                    <User />
                </el-icon>&nbsp;{{ data.nickname }}</div>
            <div class="detail"><el-icon>
                    <Timer />
                </el-icon>&nbsp;{{ dayjs(data.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
            <div class="detail"><el-icon>
                    <Timer />
                </el-icon>&nbsp;{{ dayjs(data.editTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import service from '../service/index'
import { ref, reactive, onMounted, watch } from 'vue'
const { getChapter } = service;
import { to } from '../plugin/index';
import { ElLoading, ElMessage } from 'element-plus'
import dayjs from 'dayjs';
import type { IChaptersItemDataModal } from '../type';
const emit = defineEmits(['changeIsEdit']);
const props = defineProps<{ id: string }>();

const data = ref<IChaptersItemDataModal>({});

const goToEdit = () => {
    emit('changeIsEdit', true);
}

const getChapterHandle = async () => {
    const { id } = props;
    if (id) {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        const [res, err] = await to(getChapter({ id: id as string }));
        loading.close();
        const result = res.data;
        if (!err && result.code === 0) {
            data.value = result.data;
        } else {
            ElMessage.error('新增数据失败');
            console.error(err);
        }
    }
}

watch(props, (newVal, oldVal) => {
    getChapterHandle();
})

onMounted(() => {
    getChapterHandle();
})
</script>
<style lang="less" scoped>
.view {
    height: 100%;

    .height {
        display: flex;
        justify-content: space-between;
        height: 50px;
        padding: 0 20px;
        border-bottom: 1px solid #0000000a;

        .title {
            color: #585a5a;
        }
    }

    .content {
        width: 70%;
        margin: 0 auto;
        min-height: 300px;

        .title {
            margin: 30px 0;
            font-size: 36px;
            font-weight: 700;
        }
    }

    .footer {
        display: flex;
        width: 70%;
        margin: 20px auto;
        font-size: 14px;
        color: #8a8f8d;

        .author {
            display: flex;
            align-items: center;
            padding-right: 20px;
        }

        .detail {
            display: flex;
            align-items: center;
            padding-right: 20px;
        }
    }
}

::v-deep(.editor-content-view p),
::v-deep(.editor-content-view li) {
    white-space: pre-wrap;
    /* 保留空格 */
}

::v-deep(.editor-content-view strong) {
    font-weight: bold;
}

::v-deep(.editor-content-view blockquote) {
    border-left: 8px solid #d0e5f2;
    padding: 10px 10px;
    margin: 10px 0;
    background-color: #f1f1f1;
}

::v-deep(.editor-content-view code) {
    font-family: monospace;
    background-color: #eee;
    padding: 3px;
    border-radius: 3px;
}

::v-deep(.editor-content-view pre>code) {
    display: block;
    padding: 10px;
}

::v-deep(.editor-content-view table) {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
}

::v-deep(.editor-content-view td),
::v-deep(.editor-content-view th) {
    padding: 14px 20px;
    border: 1px solid #ddd;
}

/* 斑马纹 */
::v-deep(.editor-content-view tbody tr:nth-child(even)) {
    background-color: #f9f9f9;
}

/* 悬停效果 */
::v-deep(.editor-content-view tbody tr:hover) {
  background-color: #f1f1f1;
  transition: background-color 0.3s ease;
}

::v-deep(.editor-content-view ul),
::v-deep(.editor-content-view ol) {
    padding-left: 20px;
}

::v-deep(.editor-content-view input[type="checkbox"]) {
    margin-right: 5px;
}

::v-deep(.editor-content-view h1) {
    font-size: 2em !important;
    margin: 0.67em 0 !important;
    font-weight: bold !important;
}

::v-deep(.editor-content-view h2) {
    font-size: 1.5em !important;
    margin: 0.83em 0 !important;
    font-weight: bold !important;
}

::v-deep(.editor-content-view h3) {
    font-size: 1.17em !important;
    margin: 1em 0 !important;
    font-weight: bold !important;
}

::v-deep(.editor-content-view h4) {
    font-size: 1em;
    margin: 1.33em 0;
    font-weight: bold;
}

::v-deep(.editor-content-view h5) {
    font-size: 0.83em;
    margin: 1.67em 0;
    font-weight: bold;
}
</style>
